<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen" />
    <title>MyPetStore</title>
    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>JPetStore Demo</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>


    <!--导入jquery-ui-->
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <link type="text/css" href="js/jquery-ui.min.css" rel="stylesheet">
</head>

<body>

<div id="Header">
    <div id="Logo">
        <div id="LogoContent">
            <a href="main"><img src="image/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <!--购物车-->
            <a href="viewCart"><img align="middle" name="img_cart" src="image/cart.gif" /></a>
            <!--分隔符-->
            <img align="middle" src="image/separator.gif" />
            <!--登录登出-->
            <c:if test="${sessionScope.account == null}">
                <a href="signOnForm">Sign In</a>
            </c:if>
            <c:if test="${sessionScope.account != null}">
                <a href="signOff">Sign Out</a>
            </c:if>
            <!--查看账户信息-->
            <c:if test="${sessionScope.account != null}">
                <img align="middle" src="image/separator.gif" />
                <a href="editAccount">My Account</a>
            </c:if>
            <!--分隔符-->
            <img align="middle" src="image/separator.gif" />
            <!--帮助-->
            <a href="help.html">Help</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <!--搜索-->
            <form action="searchProduct" method="post">
                <!--开启自动补全功能-->
                <input id="searchText" type="text" name="keyword" size="14" autocomplete="on"/>
                <input type="submit" name="searchProducts" value="Search" />
            </form>
        </div>
    </div>

    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH" style="background-color:#fff;"><img src="image/sm_fish.gif" /></a>
        <img src="image/separator.gif" />
        <a href="viewCategory?categoryId=DOGS" style="background-color:#fff;"><img src="image/sm_dogs.gif" /></a>
        <img src="image/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES" style="background-color:#fff;"><img src="image/sm_reptiles.gif" /></a>
        <img src="image/separator.gif" />
        <a href="viewCategory?categoryId=CATS" style="background-color:#fff;"><img src="image/sm_cats.gif" /></a>
        <img src="image/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS" style="background-color:#fff;"><img src="image/sm_birds.gif" /></a>
    </div>
</div>
<div id="Content"></div>

<script>
    $(function (){
        //对搜索输入框的键盘按下后的事件进行监听
        $('#searchText').on("keyup",function (){
            $.ajax({
                //连接数据库进行查询
                type:"GET",
                url:"completeSearchServlet",
                data:{"keyword":$('#searchText').val()},
                dataType:"json",
                success:function (data){
                    //创建数组用于存放获取的产品的名字
                    var searchResult=new Array();
                    for(var i=0;i<data.length;i++){
                        searchResult[i]=data[i].name;
                    }
                    //console.log(searchResult);
                    //将产品名显示在UI控件中
                    $('#searchText').autocomplete({
                        source:searchResult
                    });
                }
            });
        });
    });
</script>